<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quadratic Dev Server</title>
    <link rel="icon" id="favicon" type="image/png" href="">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="errorBanner" class="error-banner" style="display: none;">
        <span class="error-icon">⚠️</span>
        <span class="error-message">Connection lost. Attempting to reconnect...</span>
    </div>
    <div class="header">
        <h1>
            <svg class="quadratic-logo" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0H6V6H0V0Z" fill="#CB8999" />
                <path d="M6 7H0V13H6V7Z" fill="#5D576B" />
                <path d="M13 0H7V6H13V0Z" fill="#8ECB89" />
                <path d="M13 14H7V20H13V14Z" fill="#FFC800" />
                <path d="M13 7H7V13H13V7Z" fill="#6CD4FF" />
            </svg>
            Quadratic Dev Server
        </h1>
        <div class="controls">
            <button id="themeToggle" onclick="toggleTheme()" title="Toggle dark/light mode">🌓</button>
            <button onclick="restartAllServices()" title="Restart all services">Restart All</button>
            <button id="stopAllBtn" onclick="stopAllServices()" title="Stop all services">Stop All</button>
            <button onclick="clearLogs()">Clear Logs</button>
        </div>
    </div>

    <div class="main-content">
        <div class="service-list" id="serviceList">
            <div class="service-list-content"></div>
            <div class="service-list-divider"></div>
            <div class="target-info-pane" id="targetInfoPane">
                <div class="target-info-header" onclick="toggleTargetInfo()">
                    <span class="target-info-toggle">▼</span>
                    <span class="target-info-title">/target sizes</span>
                    <span class="target-info-total" id="targetInfoTotal">
                        <span class="target-info-loading"><span class="loading-dots"><span>.</span><span>.</span><span>.</span></span></span>
                    </span>
                    <button id="checkTargetBtn" onclick="event.stopPropagation(); checkTargetSizes()" title="Refresh /target sizes">↻</button>
                </div>
                <div class="target-info-content" id="targetInfoContent" style="display: none;">
                    <div class="target-info-list" id="targetInfoList"></div>
                    <button id="purgeTargetBtn" onclick="purgeTargetDirectories()" title="Stop all services and delete all /target directories">Purge all directories</button>
                </div>
            </div>
            <div class="target-progress" id="targetProgress" style="display: none;">
                <div class="target-progress-bar-container">
                    <div class="target-progress-bar" id="targetProgressBar"></div>
                </div>
                <div class="target-progress-text" id="targetProgressText"></div>
            </div>
        </div>
        <div class="logs-container">
            <div class="logs-header">
                <h2>Logs</h2>
                <div id="selectedService"></div>
            </div>
            <div class="logs" id="logs"></div>
        </div>
    </div>

    <script src="state.js"></script>
    <script src="utils.js"></script>
    <script src="websocket.js"></script>
    <script src="services.js"></script>
    <script src="logs.js"></script>
    <script src="api.js"></script>
    <script src="ui.js"></script>
    <script>
        // Initialize static favicon
        setStaticFavicon();
        init();
    </script>
</body>
</html>
